<%-- 
    Document   : detail_without_playlist
    Created on : 3 juil. 2013, 20:12:36
    Author     : Camara
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Etheatre</title>
<!-- // Stylesheets // -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<!-- // Javascript // -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/contentslider.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Tahoma_400-Tahoma_700.font.js"></script>
<script type="text/javascript">Cufon.replace('h1,h2,h3,h4,h5, h6, .txtcufon');</script>

<!-- Script de Diapo des videos
    <script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="slider/loopedcarousel.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        $(function(){
            $('#loopedCarousel').loopedCarousel({
                spacing: 14
            });
        });
    </script>   
<!-- Fin de Script de diapo des videos-->
<!-- script tabs -->

<script>
$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    
    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
});
</script>
<!-- fin script tabs-->
<!-- facebook code-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=156467087858148";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- fin de facebook code-->
</head>
<body>
    <div id="wrapper_sec">
        <!--Masterhead -->
        <div id="masthead">
            <div class="logo"></div>
            <div class="header_rightsec">
                <div class="rightsec_1">
                    <div class="navigation">
                        <div id="smoothmenu1" class="ddsmoothmenu">
                            <ul>
                                <li><a class="home" href="index.jsp">Accueil</a></li>
                                <li><a href="">Vidéos Populaires</a></li>
                                <li><a href="contact.jsp">Contactez-nous</a></li>
                            </ul>
                        </div>
                    </div>
        <div class="barreDeconnexion">
        <ul class="toplinks">
            <li><a href="compte_with_playlist.jsp"> Lass Cam</a></li>
            <li><a href=""> Se déconnecter</a></li>
        </ul>
        </div>
                </div>
                <div class="rightsec_2">
                    <ul class="social_networks">
                        <li class="share">Partager avec nous:</li>
                        <li><a href="#"><img src="images/socialicon1.png" alt="" /> </a></li>
                        <li> <a href="#"><img src="images/socialicon2.png" alt="" /> </a></li>    
                    </ul>
                </div>
            </div>          
            <div class="clear" ></div>
        </div>
    <!--Content Sec -->
    <div class="barreDeRecherce" style="height: 50px;">
        <!--Top search-->
        <div class="top_search">
            <input value="Entrer votre mot clé" onfocus="if(this.value=='Entrer votre mot clé') {this.value='';}" onblur="if(this.value=='') {this.value='Entrer votre mot clé';}"name="txt" type="text" /><a href="#" class="search">Chercher</a>
        </div>
    </div></br></br>
        <div id="content_sec">
        	<div class="crumb">
            	<ul>
                	<li class="here_text txtcufon">Vous etes ici:</li>
                	<li><a href="#">Accueil</a></li>
                    <li><a href="#">Détail</a></li>
                    <li><a href="">le nom de la vidéo</a></li>
                </ul>
            </div>
            <!-- Fin barre de recherche-->
            <!-- Contenu de la page detail-->
            <div class="BigDetail">
                <div class="LeftDetail" >
                <h2 class="pd11">Description</h2>
                <div class="LeftDetailimage"><img src="images/play_video_device_web.png" width="190px" height="190px;"></div>
                <div class="LeftDetailtitre"><span> Titre :</br>  </span>Chiwawa</div>
                <div class="LeftDetailtitre"><span> Titre original :</br></span>Chiwawa</div>
                <div class="LeftDetailtitre"><span> Catégorie :</br> </span>Comedie romantique, Science fiction</div>
                <div class="LeftDetailtitre"><span> Durée :</br></span>2h 30 mn 5s</div>
                <div class="LeftDetailtitre"><span> Acteurs :</br></span>Pacha Aboul, Lass Cam</div>
                <div class="LeftDetailtitre"><span> Année de Sortie :</br></span>2002</div>
                <div class="LeftDetailtitre"><span> Sociétés de production</br></span>LassCam Prod</div>
                <div class="LeftDetailtitre"><span> Pays d’origine :</br></span>Mali</div>
                <div class="LeftDetailtitre"><span> Synopsie :</span><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

                At vero eos et accusam et justo duo dolores et ea rebum..

                Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
                </div>
                <div class="MiddleDetail" >
                <h2 class="pd11">le nom de la video</h2>
                        <div class="vedioactive">
                           <iframe width="550" height="398" src="http://www.youtube.com/embed/FzWRjYwNO8E" frameborder="0" allowfullscreen></iframe> 
                        </div>  
                        <div class="sharevedio">
                            <div class="sv_topsec">
                                <div class="like_dislike">
                                    <ul>
                                        <li><a class="like" href="#">J'aime</a></li>
                                        <li class="nobdr"><a class="dslike" href="#">Je n'aime pas</a></li>
                                    </ul>
                                </div>
                                    <a href="#" class="sharetab">Share</a>
                                    <div class="embed"><a href="#" class="embed">Embed</a></div>
                                    <div class="embed"><a href="#" class="embed">Abonner</a></div>
                                <div class="clear"></div>
                            </div>
                            <div class="sv_contsec">
                                <ul>
                                    <li> 
                                        <input name="txt" onfocus="if(this.value)" 
                                        value="http://www.youtube.com/embed/FzWRjYwNO8E" type="text" />
                                    </li>
                                    <li class="share">Partager:</li>
                                    <li><a href="#"><img src="images/share7.jpg"  alt="" /></a></li>
                                    <li><a href="#"><img src="images/share4.gif"  alt="" /></a></li>
                                    <li class="nomar"><a href="#"><img src="images/share5.gif"  alt="" /></a></li>
                                </ul>
                            </div>
                      <div class="clear"></div>     
                  </div>
                        <div class="clear"></div>
                        <div class="cmntcontainer">
                        <h2 class="pd11">Commentaire</h2>
                        <div class="comment">
                            <textarea  class="txtcomment" name="txt" cols="0" rows="0"></textarea>
                        </div>
                        <div class="clear"></div>
                        <div class="commentaction"> 
                            <span class="left" >500 caractéres</span>
                            <ul>
                                <li><a href="#">Annuler</a> ou </li>
                                <li><a  class="post" href="#">Publier</a></li>
                                <li class="nomar" ><a class="vedio" href="#">Attacher une vidéo</a></li>
                            </ul>
                        </div>
                        <div class="clear"></div>
                        <div class="commentsec">
                        <div class="replyfrist">    
                            <div class="reply1_cmnt">
                                <h6>MySebbb:</h6>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit. Nulla sem risus, vestibulum in,                                         volutpat eget, dapidapibus. Sed pede lacus, pretium in, condimentum sitllis dapibus, magna...
                                    Ut bibendum dolor nec augue.
                                </p>
                                <div class="clear"></div>
                                <ul class="cmntinfo">
                                    <li>Il y'a 7 mois</li>
                                    <li><a class="like" href="#">J'aime</a> </li>
                                    <li><a class="dslike" href="#">Je n'aime pas</a> </li>
                                </ul>
                        </div>
                            
                            <div  class="cmntrply">
                                <a class="postimg" href="#"><img src="images/postimg.gif"  alt="" /></a>
                                <a class="rply" href="#">Répondre</a>
                            </div>
                        </div>
                        <div class="replyfrist">
                            <div class="reply1_cmnt">
                                <h6>MySebbb:</h6>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit. Nulla sem risus, vestibulum in,                                             volutpat eget, dapidapibus. Sed pede lacus, pretium in, condimentum sitllis dapibus, magna...
                                        Ut bibendum dolor nec augue.
                                    </p>
                                    <div class="clear"></div>
                                    <ul class="cmntinfo">
                                        <li>Il y'a 7 mois</li>
                                        <li><a class="like" href="#">J'aime</a> </li>
                                        <li><a class="dslike" href="#">Je n'aime pas</a> </li>
                                    </ul>
                                <div class="clear"></div>
                            </div>
                            <div class="reply1_cmnt_arrow">&nbsp;</div>
                            <div  class="cmntrply">
                                <a class="postimg" href="#"><img src="images/postimg1.gif"  alt="" /></a>
                                <a class="rply" href="#">Répondre</a>
                            </div>
                        </div>
                        <div class="replysecond">
                            <div class="replysecond_cmnt">
                                <p>
                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit. Nulla sem risus, vestibulum in,                                             volutpat eget, dapidapibus. Sed pede lacus, pretium in, condimentum sitllis dapibus, magna...
                                        Ut bibendum dolor nec augue.
                                    </p>
                                    <div class="clear"></div>
                                    <ul class="cmntinfo">
                                        <li>Il y'a 7 mois</li>
                                        <li><a class="like" href="#">J'aime</a> </li>
                                        <li><a class="dslike" href="#">Je n'aime pas</a> </li>
                                    </ul>

                            </div>
                        
                        <div  class="cmntrply">
                            <a class="postimg" href="#"><img src="images/postimg2.gif"  alt="" /></a>
                            <a class="rply" href="#">Répondre</a>
                        </div>
                    </div>
                    
                    <div class="replyfrist">    
                        <div class="reply1_cmnt">
                        <h6>MySebbb:</h6>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit. Nulla sem risus, vestibulum in, volutpat                                    eget, dapidapibus. Sed pede lacus, pretium in, condimentum sitllis dapibus, magna...
                                Ut bibendum dolor nec augue Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit.
                            </p>
                            <div class="clear"></div>
                            <ul class="cmntinfo">
                                <li>Il y'a 7 mois</li>
                                <li><a class="like" href="#">J'aime</a> </li>
                                <li><a class="dslike" href="#">Je n'aime pas</a> </li>
                            </ul>
                        </div>
                        
                        <div  class="cmntrply">
                            <a class="postimg" href="#"><img src="images/postimg3.gif"  alt="" /></a>
                            <a class="rply" href="#">Répondre</a>
                        </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                <div class="clear"></div>
            </div>
                </div>
                <div class="RightDetail" >
                <div class="publateral">
                    <img src="images/publateral.gif" width="190px" height="525px">
                </div>
                <div class="publateral">
                    <img src="images/publateral.gif" width="190px" height="525px">
                </div>               
                </div>
            </div>  
            <!-- fin Contenu de la page detail-->
        <!-- movie ads-->
        <div class="movie_ads"><a href="#"><img src="images/movie_ad.gif"  alt="" /></a></div>
    </div> 
 <div class="clear"></div>
</div>
<!-- bottom section-->
<div id="bottom_sec">
    <div class="botbar">
        <div class="innercontainer">
            <div class="socialtitle">
                <h3>Nos Tweets<img align="right" src="images/twittericon.png"  alt="" /> </h3>
            </div>
            <div class="msg">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit. Nulla sem risus, vestibulum in, volutpat eget, dapib                                 <a href="#">http://bit.ly</a>
           </div>
           <a class="follow_us" href="#"><span>Suivez-nous</span></a>     
        </div>
    </div>
    <div id="bottomcontianer">
        <div class="innercontainer">
        <div id="footer">
            <div class="archieve">
                <a href="#"><img src="images/logo2.png"  alt="" /></a>
                <p>601 Misira Rue Pacha</p>
                <p>Bamako, 73023</p>
                <p>Tel 000.000.0000</p>
                <p> Email: <a class="undrlne" href="#">info@videostreaming.com</a></p>
                <p> Website: <a class="undrlne" href="#">www.videostreaming.com</a></p>
            </div>          
            <div class="footer_div">
                <h4>A Propos</h4>
                <ul>
                    <li><a href="#">Qui sommes-nous</a></li>
                    <li><a href="#">Partenariat</a></li>
                    <li><a href="#">Publicité</a></li>
                    <li><a href="#">Dérniéres Vidéos</a></li>
                </ul>
            </div>
            <div class="footer_div">
                <h4>Catégorie</h4>
                <ul>
                    <li><a href="#">Comédie</a></li>
                    <li><a href="#">Sport</a></li>
                    <li><a href="#">Films</a></li>
                    <li><a href="#">Caméras Cachées</a></li>
                </ul>
            </div>
      <div class="from_fliker">
            <h4>Flickr</h4>
            <ul>
                <li><a href="#"><img src="images/fromflickr1.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/fromflickr2.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/fromflickr3.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/fromflickr4.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/fromflickr5.gif" alt="" /></a></li>
                <li><a href="#"><img src="images/fromflickr6.gif" alt="" /></a></li>
            </ul>
          </div>
          </div>
        </div>
    </div>
    <div id="botbarbg">
        <div class="innercontainer">
            <div class="copy">Copyright &copy; 2013 Video Steaming, Inc. All Rights Reserved.</div>
            <div class="powerby">Designed By: <a href="#">LassCam</a></div>
        </div>
    </div>
<div class="clear"></div>
</div>


</body>
</html>
